<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 要想拿到输入框里的值，必须通过v-model给他双向绑定一个值，这样我们在vue实例中就能拿到这个值 -->
        <input type="text" v-model="inputValue">
        <!-- 通过v-on:click绑定事件，点击后回去vue实例中找这个方法，并且自动执行该方法 -->
        <button v-on:click="handleBtnClick">提交</button>

        <!-- 组件的调用：首字母小写，用-隔开  -->
        <!-- app相当于父组件，todo-item相当于子组件，父组件向子组件传值，子组件需要绑定一个v-bind -->
        <ul>
            <todo-item v-bind:content="item" v-for="(item,index) in list" @delete="deleteItem" v-bind:index="index">
            </todo-item>
        </ul>

    </div>

    <script>

        //使用局部组件
        var TodoItem = {
            props: ['content', 'index'],
            // 1.给子组件添加一个点击触发事件
            template: '<li v-on:click="handleItemClick">{{content}}</li>',
            methods: {
                handleItemClick: function () {
                    // 子组件向父组件传递delete
                    this.$emit("delete", this.index)
                }
            }
        }

        var app = new Vue({
            el: '#app',
            // 使用局部组件时，需要把局部组件在父组件中注册,注意components加s
            components: {
                TodoItem: TodoItem
            },
            data: {
                // 与输入框绑定的inputValue对应，
                //修改vue实例中的值会影响输入框的inputValue，同样输入框的inputVlue值也会影响Vue实例中对应的值，
                //这就是双向绑定(将输入框的value值和vue实例中inputValue进行了绑定)。
                inputValue: '',
                // 定义了数组，用来存储li里面的内容
                list: ['第一课的内容', '第二课的内容']
            },
            methods: {
                // 点击按钮触发的事件
                handleBtnClick: function () {
                    // alert(this.inputValue)
                    // // 这里为啥不是app.$data.inputValue呢？
                    // //原因很简单，因为methods：是属于app这个vue实例的范围内的，所以直接用this.调用就行了，也不需要给data起别名
                    this.list.push(this.inputValue)
                    // 这一步的作用是当用户输入完后自动地将输入框清空
                    this.inputValue = ''
                },
                deleteItem: function (index) {
                    // 如何实现删除？ splice：从传入的下标开始，删除一项
                    this.list.splice(index, 1)
                }
            },
        })
    </script>

</body>

</html>